<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线购物商城</title>
    <link rel="stylesheet" href="../css/shop.css">
</head>


<body>
    <div class="header">
        <div class="header-content">
            <a href="#" class="logo">在线购物商城</a>
            <form class="search-box" action="" method="post">
                <input type="text" class="search-input" placeholder="请输入商品名称">
                <button class="search-btn">搜索</button>
            </form>
            <ul class="clearfix user-actions">
                <li>
                    <a href="">购物车</a>
                </li>
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <a href="">个人中心
                        <ul class="downlist clearfix">
                            <li>
                                <a href="">修改个人信息</a>
                            </li>
                            <li>
                                <a href="">修改收货地址</a>
                            </li>
                            <li>
                                <a href="">退出登录</a>
                            </li>
                        </ul>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <div class="category-nav">
        <ul class="category-list">
            <li class="category-item active">
                <a href="#">全部商品</a>
            </li>
            <li class="category-item">
                <a href="#">运动户外</a>
            </li>
            <li class="category-item">
                <a href="#">馋嘴零食</a>
            </li>
            <li class="category-item">
                <a href="#6">潮电数码</a>
            </li>
            <li class="category-item">
                <a href="#4">服饰时尚</a>
            </li>
            <li class="category-item">
                <a href="#1">家居日用</a>
            </li>
            <li class="category-item">
                <a href="#12">个护家清</a>
            </li>
        </ul>
    </div>

    <div class="main-content">
        <div class="product-grid">
            <!-- 商品卡片1 -->
            <div class="product-card">
                <img src="../images/002.png" alt="泰国金枕榴莲" class="product-image">
                <div class="product-title">xxxxxxxxxx</div>
                <div class="product-price">67.90</div>
                
            </div>

            <!-- 商品卡片2 -->
            <div class="product-card">
                <img src="../images/002.png" alt="春见耙耙柑" class="product-image">
                <div class="product-title">xxxxxxx</div>
                <div class="product-price">44.50</div>
               
            </div>

            <!-- 商品卡片3 -->
            <div class="product-card">
                <img src="../images/001.png" alt="" class="product-image">
                <div class="product-title">xxxxxxxxx</div>
                <div class="product-price">22.80</div>
                
            </div>

            <!-- 商品卡片4 -->
            <div class="product-card">
                <img src="../images/001.png" alt="冬枣" class="product-image">
                <div class="product-title">xxxxxxxx</div>
                <div class="product-price">22.80</div>
                
            </div>
            <div class="product-card">
                <img src="../images/001.png" alt="冬枣" class="product-image">
                <div class="product-title">xxxxxxxx</div>
                <div class="product-price">22.80</div>
                
            </div>
            <div class="product-card">
                <img src="../images/001.png" alt="冬枣" class="product-image">
                <div class="product-title">xxxxxxxx</div>
                <div class="product-price">22.80</div>
                
            </div>

            <!-- 可以继续添加更多商品卡片 -->
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categoryItems = document.querySelectorAll('.category-item');

            categoryItems.forEach(item => {
                item.addEventListener('click', function () {
                    // 移除所有 li 的 active 类
                    categoryItems.forEach(item => {
                        item.classList.remove('active');
                    });

                    // 给当前点击的 li 添加 active 类
                    this.classList.add('active');
                });
            });
        })

    </script>
</body>


</html>